<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Persistent Sphere Example — Networked-Aframe</title>
    <meta name="description" content="Persistent Sphere Example — Networked-Aframe" />

    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js"></script>
    <script src="/easyrtc/easyrtc.js"></script>
    <script src="/dist/networked-aframe.js"></script>
    <script>
      // see issue https://github.com/networked-aframe/networked-aframe/issues/267
      NAF.schemas.getComponentsOriginal = NAF.schemas.getComponents;
      NAF.schemas.getComponents = (template) => {
        if (!NAF.schemas.hasTemplate('#avatar-template')) {
          NAF.schemas.add({
            template: '#avatar-template',
            components: [
              {
                component: 'position',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001)
              },
              {
                component: 'rotation',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5)
              },
              {
                selector: '.head',
                component: 'material',
                property: 'color'
              }
            ]
          });
        }
        if (!NAF.schemas.hasTemplate('#sphere-template')) {
          NAF.schemas.add({
            template: '#sphere-template',
            components: [
              'position',
              {
                component: 'material',
                property: 'color'
              }
            ]
          });
        }
        const components = NAF.schemas.getComponentsOriginal(template);
        return components;
      };
    </script>

    <script src="https://cdn.jsdelivr.net/npm/aframe-randomizer-components@3.0.2/dist/aframe-randomizer-components.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-environment-component@1.5.0/dist/aframe-environment-component.min.js"></script>
    <script src="/js/spawn-in-circle.component.js"></script>
    <script src="/js/color-changer.component.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
  </head>
  <body>
    <a-scene
      cursor="rayOrigin: mouse"
      raycaster="objects:.raycastable"
      networked-scene="
        room: basic-persistent;
        debug: true;
        adapter: wseasyrtc"
    >
      <a-assets>
        <!-- Templates -->
        <template id="sphere-template">
          <a-entity class="raycastable" geometry="primitive: sphere" material="color: red" color-changer></a-entity>
        </template>

        <!-- Avatar -->
        <template id="avatar-template">
          <a-entity class="avatar">
            <a-sphere class="head" scale="0.45 0.5 0.4"></a-sphere>
            <a-entity class="face" position="0 0.05 0">
              <a-sphere class="eye" color="#efefef" position="0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
              </a-sphere>
              <a-sphere class="eye" color="#efefef" position="-0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
              </a-sphere>
            </a-entity>
          </a-entity>
        </template>

        <!-- /Templates -->
      </a-assets>

      <a-entity id="rig">
        <a-entity
          id="player"
          networked="template:#avatar-template;attachTemplateToLocal:false;"
          camera
          position="0 1.6 0"
          spawn-in-circle="radius:3"
          wasd-controls
          look-controls
        >
          <a-sphere class="head" visible="false" random-color></a-sphere>
        </a-entity>
      </a-entity>

      <a-entity
        id="sphere"
        networked="template:#sphere-template;networkId:sphere;persistent:true;owner:scene"
      ></a-entity>
      <!--
        Specifying a owner that isn't a real participant is used so that the
        participant joining the room won't send this entity because not the
        current owner, otherwise the participant will send the default red
        color to the other participants, overriding the color
        defined by the current owner of the sphere in the room.
      -->

      <a-entity environment="preset:arches"></a-entity>
    </a-scene>

    <div class="controls">
      <p>
        Click on the sphere to change its color. The color is shared between the participants. The sphere won't be
        removed if the current owner (the latest participant that clicked on the sphere) leaves the room.
      </p>
    </div>

    <script>
      // Called by Networked-Aframe when connected to server
      function onConnect() {
        console.log('onConnect', new Date());
      }
    </script>
  </body>
</html>
